@import '/src/global.less';

.tab{
  :global{
    .ant-select-multiple .ant-select-selection-item{
      background: #1890ff!important;
      border: 1px solid #40a9ff!important;
    }
  }
}

.selectImg{
 
  :global{
    .ant-image{
      margin-left: 5px;
    }
  }
}

.main {
    // width: 100%;
    // height: 100%;
    padding: 28px 24px;
    margin: 24px 22px;
    overflow: auto;
    background: #122765 !important;
   .flexEnd{
    display: flex;
    justify-content: flex-end;
   }
    .designContent{
      margin: 12px -8px;
    }
    .tabsTitle{
      height: 40px;
      width: 100%;
     .a3::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: @plate-bg!important;
        border-top: 1px solid @border-line-color!important;
        border-right: 1px solid @border-line-color!important;
        transform: skewX(45deg);
     
    }
    .a2::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background-color: @plate-bg!important;
      transform: skewX(45deg);
      border-left: 1px solid @border-line-color!important;
      border-right: 1px solid @border-line-color!important;
      border-top: 1px solid @border-line-color!important;
  }
    .a2,.a3 {
        width: 150px;
        height: 40px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        z-index: 0;
        float: left;
     
    }
    .a1 {
   
      background-color: @plate-bg!important;
      width: 150px;
      height: 40px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-decoration: none;
      z-index: 0;
      float: left;
      border-top: 1px solid @border-line-color!important;
      border-left:1px solid @border-line-color!important;
   
  }
  .a1after{
    float: left;
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-bottom-color: @plate-bg!important;
    border-left-color: @plate-bg!important;
    margin-right: -20px;

  }
  .tabcheck1{
     background-color:#4377dd!important
  } 
  .dashboardContent{
    position: relative;
  }
  .tabcheck{
   
   } 
   .tabcheck::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color:#4377dd!important;
    transform: skewX(45deg);
 
}
  .a1afterCheck{
    border-bottom-color: #4377dd!important;
    border-left-color: #4377dd!important;
  }
    }
    .yuan{
      width: 15px;
      height: 15px;
      background: #8ca1aa;
      border-radius: 10px;
      margin: auto;
     
    }
    .flex{
      display: flex;
      align-items: center;
    }
    .flexColumn{
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .deviceInfo{
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 16px;
      .updateTimeText{
        font-size: 10px;
      }
    }
    .flexBetween{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .closeIcon{
      position: absolute;
      top: 5px;
      right: 5px;
      color: #ccc;
    } 
    .alrmcontent{

    }
      .dataItem{
        flex: 1 ;
        background-color: @plate-bg!important;
        border: 1px solid @border-line-color!important;
        // margin: 5px 6px;
        border-radius: 5px;
        color:white;
        text-align: center;
        padding: 12px 20px;
       .bottom{
        position: fixed;
        bottom: 8px;
        width: 100%;
        left: 0;
        .attribute{
          color: white;
          margin: auto;
          //  background-image: url(../../../../assets/img/img/jn.png);
          background: -webkit-linear-gradient(left, #1b3b8a, #132766, #1b3b8a);
          width: 140px;
          font-size: 12px;
          height: 22px;
         
        }
       }
        // height: 105px;
        .middleValue{
          margin: -12px 0 0;
        }
        .nameItalic{
          font-style: italic;
          font-size: 34px;
          // font-weight: 600;
          color: #40ffff;
        }
        
        .topRight{
          color: #92b2ff;
          font-size: 14px;
        }
        .data{
          font-size: 34px;
          /* font-weight: 600; */
          color: #40ffff;
        }
        .data1{
          font-size: 26px;
        
          // color: #eaaf04;
        }
        .unit{
          
        }
      
      }
      .flexcenter{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 8px auto 9px ;
      }
  
      .flexcenter1{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 12px auto 13px;
      }
      
      .flexColumn{
        display: flex;
        align-items: center;
        flex-direction: column;
      }
  
    .bgGreen{
      background-color: #27d088;
      box-shadow:0px 0px 8px 3px #aaa
    }

    .bgRed{
      background-color: #fe1013 ;
      box-shadow:0px 0px 8px 3px #aaa
    }

    .bgYellow{
      background-color: #eaaf04;
      box-shadow:0px 0px 8px 3px #aaa
    }
    // .stateL{
    //   width: 130px;
    //   margin-left: 50px;
      .yuan{
        margin-bottom: 8px;
      }
     
    // }
    .alarmBox{
      // height: 447px;
       margin:0 6px;
       width: auto;
       width: 100%;
       flex:1;
      .content{
        line-height: 29px;
        margin-top: 15px;
      }

    }
 
    .state{
      text-align: center;
     
      margin-top: 10px;
      .yuan{
        margin-bottom: 8px;
      }
   }
   .baojingText{
    flex: 1;
    margin-left: 12px;
   }
  
    .title{
      font-size: 24px;
    }
    .title1{
      font-size: 22px;
    }
    .littleText{
      display: flex;
      align-items: center;
    }
    .alarmTable{
      :global{
        .ant-card-body {
          padding: 0px;
        }
    
      }
    }
    .dataBox{
      width:100%;
      // min-width: 150px;
      background-color: rgb(19 39 102) !important;
      color: #ebaf04;
      height: 35px;
      line-height: 28px;
      text-align: left;
      padding: 0 0 0 10px;
      margin: 0 10px 0 30px;
      border: 2px inset #1b3b8b;
      font-size: 10px;
    }
    .divider{
      border-top: 1px solid rgb(53 95 184);
    }
    :global{
      .ant-tabs-content{
        height: auto;
      }
      .ant-card{
        font-size: 12px;
        background-color: @plate-bg!important;
        border: 1px solid @border-line-color!important;
        color: white;
        height: 100%;
      
      }
      .ant-radio-button-wrapper {
        color: hsla(0,0%,100%,.85)!important;
        background: transparent!important;
        border: 1px solid #355fb8;
      }
      .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        z-index: 1!important;
        color: hsla(0,0%,100%,.99)!important;
        background: #3e80d6!important;
        border-color: #1890ff!important;
      }
      .ant-radio-button-wrapper:not(:first-child)::before {
        background: transparent!important;
      }
      .ant-collapse-borderless > .ant-collapse-item {
        border-bottom: 0;
      }
      .ant-collapse > .ant-collapse-item > .ant-collapse-header {
        padding: 10px 0;
        color: white;
      }
      .ant-collapse-borderless {
        background-color: transparent;
      
    }
    .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add {
      background: #355fb8;
      border: 0;
     }

    }

}
